import React, { Component } from 'react'
import { bindActionCreators } from 'redux'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import * as Actions from '../../actions/order'
import Container from '../../components/Container'
import OrderProductItem from '../../components/OrderProductItem'
import ListView from '../../components/ListView'

class OrderList extends Component{
  static contextTypes={
    router:PropTypes.object.isRequired,
  }
  constructor(props) {
    super(props);
    this.state = {
      data:[]
    }
  }
  componentDidMount(){
   
  }
  getStatusText(status){
    let orderStatus=''
    switch(status) {
      case '10':
        orderStatus='To be paid'
        break;
      case '20':
        orderStatus='Pending delivery'
        break;
      case '30':
        orderStatus='Goods to be received'
        break
    /*  case '40':
        orderStatus='In return'
        break
      case '50':
        orderStatus='Refunds'
        break
      case '60':
        orderStatus='In the complaint'
        break*/
      case '40': case '50': case '60': case '100':
       orderStatus='Abnormal single'
        break;
      case '80':
       orderStatus='Closed'
        break;
      case '90':
       orderStatus='Completed'
        break;
    }
    return orderStatus
  }
  

  render(){
  	let {orderStatus} = this.props
    let params={}
    if(orderStatus.selectedIndex != 0)
      params.order_status=orderStatus.children[orderStatus.selectedIndex].status

    return(
        <Container >
         <div className='order-nav'>
          <span className='oleft'>{orderStatus.children[orderStatus.selectedIndex].text}</span>
          <span className='oright' onClick={()=>{
            this.context.router.history.push('/order/filter')
          }}>Screening order »</span>
         </div>

         <ListView
            fiterData={params}
            FetchAction={Actions.getOrderList}
            top={'98px'}
            bottom={'0'}
            loadSuccess={ (data)=>{ this.setState({data :data})}}
          >
          { this.renderList()}
          </ListView>
        </Container>
    )
  }
  renderList(){
    let { data } =this.state 
    return (
      <div className='order-list'>
          {/*订单 begin*/}
          {
            data.map((item,i) =>{
              return (
                  <div className='order-item' key={i}>
                    <div className='order-code'>Order Code:{item.order_sn}
                    <span className='order-status'>{ this.getStatusText(item.order_status)}</span>
                    </div>
                    {
                      item.goods_list.map((jtem,j) =>{
                        return(
                          <div key={j} style={{'borderBottom':'1px solid #d9d9d9'}} >
                            <OrderProductItem 
                            item={jtem}  
                            fromPage ={'order'}
                            onClickLeft={()=>{ this.context.router.history.push(`/goods/${jtem.goods_id}`)}}
                            onClickLeft_gift={(id,type,e) =>{ e.stopPropagation; this.context.router.history.push(`/subGoods/${id}/${type}`) }}
                            onClickRight={()=>{ this.context.router.history.push(`/order/details/${item.order_id}`)}}
                            onClickRight_gift={(id,type,e) =>{ e.stopPropagation; this.context.router.history.push(`/order/details/${item.order_id}`) }}
                            />
                          </div>
                          
                          )
                      })
                    }
                    <div className='order-total'>
                      <span className='s1'>Total number of goods：{item.goods_list.length}</span>
                      <span className='s2'>payed:$<span className='money'>{item.payed_price}</span></span>
                    </div>
                  </div>
                )
            })
          }
          
          {/*订单 end*/}
         </div>
      )
  }
 
}
function mapStateToProps(state){
  return{ 
    orderStatus:state.orderStatus.toJS()
  }
}
function mapDispatchToProps(dispatch){
  return{
    actions:bindActionCreators(Actions,dispatch)
  }
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(OrderList)


